<template>
  <dtDialog
    title="问题维护"
    :visible.sync="dialogVisible"
    :lock-scroll="false"
    :append-to-body="true"
    :is-loading="loading"
    @closeDialog="onModalClosed"
    @comfirmBtn="onSubmit"
  >
    <el-form
      ref="form"
      slot="content"
      label-width="140px"
      :model="form"
      :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="问题" prop="problem">
            <el-input
              v-model.trim="form.problem"
              placeholder="请输入问题"
              maxlength="50"
              show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="问题答案" prop="answer">
            <Editor
              v-if="dialogVisible"
              ref="inputValueRef"
              :init="editorInit"
              :id="tinymceId"
              v-model="form.answer"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </dtDialog>
</template>

<script>
import { uploadFile, addProblem, editProblem } from '@/api/problemPreset/index'
import Editor from '@tinymce/tinymce-vue'

export default {
  components: { Editor },
  data() {
    return {
      form: {
        problem: '',
        answer: ''
      },
      rules: {
        problem: [{ required: true, message: '请输入问题', trigger: ['blur'] }],
        answer: [{ required: true, message: '请输入问题答案', trigger: ['blur', 'change'] }]
      },
      tinymceId: '',
      modalTitle: '',
      loading: false,
      dialogVisible: false,
      action: '',
      answerBool: true
      // uploadFileUrl: process.env.VUE_APP_BASE_API + cloud.file + '/sysFileInfo/upload?secretFlag=N'
    }
  },
  computed: {
    editorInit() {
      return {
        menubar: false,
        branding: false,
        // language_url: '/Tinymce/zh_CN.js',
        language: 'zh_CN',
        // skin_url: '/Tinymce/skins/ui/oxide',
        height: this.height,
        body_class: 'panel-body ',
        plugins: [
          'code',
          'print',
          'preview',
          'fullscreen',
          'paste',
          'searchreplace',
          'save',
          'autosave',
          'link',
          'autolink',
          'image',
          'imagetools',
          'media',
          'table',
          'codesample',
          'lists',
          'advlist',
          'hr',
          'charmap',
          'emoticons',
          'anchor',
          'directionality',
          'pagebreak',
          'quickbars',
          'nonbreaking',
          'visualblocks',
          'visualchars'
          // 'wordcount'
        ].join(' '),
        toolbar: [
          'fullscreen',
          'preview',
          'code',
          '|',
          'undo',
          'redo',
          '|',
          'forecolor',
          'backcolor',
          '|',
          'bold',
          'italic',
          'underline',
          'strikethrough',
          '|',
          'alignleft',
          'aligncenter',
          'alignright',
          'alignjustify',
          '|',
          'outdent',
          'indent',
          '|',
          'numlist',
          'bullist',
          '|',
          'formatselect',
          'fontselect',
          'fontsizeselect',
          '|',
          'link',
          'image',
          'media',
          'emoticons',
          'charmap',
          'anchor',
          'pagebreak',
          'codesample',
          '|',
          'ltr',
          'rtl'
        ].join(' '),
        draggable_modal: true,
        toolbar_mode: 'sliding',
        images_upload_handler: (blobInfo, success) => {
          // success('data:image/jpeg;base64,' + blobInfo.base64())
          // 改为自定义上传
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          formData.append('secretFlag', 'N')
          uploadFile(formData).then((res) => {
            success(res.data.fileUrl)
          }).catch(() => {
            this.$dtModal.msgWarning('上传失败')
          })
        },
        file_picker_types: 'media',
        file_picker_callback: () => {
        }
      }
    }
  },
  watch: {
    'form.answer': {
      handler(val) {
        if (val && this.answerBool) {
          this.$refs.form.clearValidate('answer')
          this.answerBool = false
        }
        if (!val) {
          this.answerBool = true
        }
      }
    }
  },
  methods: {
    onModalClosed() {
      this.initModel()
    },
    onSubmit() {
      this.$refs.form.validate((result, message) => {
        if (result) {
          this.loading = true
          if (this.action == 'edit') {
            editProblem(this.form).then((res) => {
              this.$dtModal.msgSuccess(res.message)
              this.loading = false
              this.dialogVisible = false
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          } else if (this.action == 'add') {
            addProblem(this.form).then((res) => {
              this.$dtModal.msgSuccess(res.message)
              this.loading = false
              this.dialogVisible = false
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          }
        }
      })
    },
    add(row) {
      this.dialogVisible = true
      this.action = 'add'
      this.form = { ...row }
    },
    edit(row) {
      this.dialogVisible = true
      this.action = 'edit'
      this.form = { ...row }
    },
    initModel() {
      this.$refs.form.resetFields()
      this.form = {
        problem: '',
        answer: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
